import 'package:flutter/material.dart';
import 'package:flutter_kit_dsp/flutter_kit_dsp.dart';
import 'package:flutter_kit_plus/flutter_kit.dart';

import '../../common/bg_page.dart';
import '../../tool/assets.dart';
import 'in_bottom_grid.dart';

class MyIn extends SumPageDelegate {
  List<SumType> sumList = [SumType.sum2CH, SumType.sum4CH, SumType.sumCUSTOM];
  List<String> teypTextList = [assets.bluetooth, 'USB', 'RCA'];
  List<SourceType> sourceList = [SourceType.bt, SourceType.usb, SourceType.rca];

  Widget bottomgrid(child, {needGap = true, reversed = true}) {
    var list = [needGap ? Container(width: 80) : Container(), Flexible(flex: 1, child: child)];
    return SizedBox(height: 60, child: Row(children: reversed ? list.reversed.toList() : list));
  }

  Widget arrowGrid(child, {leftGap = 0.0, isTitle = false}) {
    return Container(
      height: 90,
      padding: EdgeInsets.only(left: leftGap),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Flexible(
            flex: isTitle ? 1 : 5,
            child: Column(
              spacing: 5,
              children: [
                Flexible(flex: 2, child: child),
                Flexible(flex: 1, child: Container()),
              ],
            ),
          ),

          ///右边下箭头部份
          Container(
              width: 60,
              child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                Expanded(flex: 1, child: Container()),
                Expanded(flex: 3, child: Container(color: Colors.transparent, child: Image.asset(assets.arrow2)))
              ])),
          Flexible(flex: 1, child: Container()),
        ],
      ),
    );
  }

  Widget buildMyTextButton({required SumType type}) {
    return Obx(() {
      var model = globalController.rxModel.value;
      bool select = model.sum_type == type.value;
      return myTextButton(
        height: 40,
        radius: 4,
        select: select,
        colors:
            select ? [const Color(0xFF9ED1E6), Colors.white.withOpacity(1)] : [Colors.transparent, Colors.transparent],
        onTap: () => globalController.updateSum(type: type),
        child: Center(
          child: FittedBox(
            fit: BoxFit.scaleDown, // 自动缩小直到文字 fits
            child: Text(type.value, style: font30, maxLines: 1),
          ),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox.expand(
      child: Stack(
        children: [
          Positioned.fill(child: BgPage(bg: assets.B2, logo: assets.L2)),
          Positioned.fill(
              child: Padding(
            padding: const EdgeInsets.all(10),
            child: Column(
              spacing: 10,
              children: [
                ///顶部CHANNEL SETUP
                Center(
                    child: myTextButton(
                        height: 40,
                        radius: 4,
                        width: 320,
                        color: const Color(0xFF88B855),
                        colors: const [Color(0xFF88B855), Color(0xFF88B855)],
                        onTap: () => print('=============>点击了channel setup按钮'),
                        child: Center(child: Text('CHANNEL SETUP', style: font30)))),

                Expanded(
                  child: Container(
                    // color: Colors.red,
                    padding: const EdgeInsets.only(left: 50, right: 50),
                    child: Obx(() {
                      return Row(
                        children: [
                          ///左边 bt | usb | rca
                          Padding(
                            padding: const EdgeInsets.only(top: 20, bottom: 50),
                            child: Row(
                              children: [
                                /// bt | usb | rca
                                Container(
                                  width: 100,
                                  decoration: boxDecoration(5),
                                  child: Column(
                                    spacing: 10,
                                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                                    children: sourceList.asMap().entries.map(($0) {
                                      bool select = globalController.sourceType.value == $0.value;
                                      String text = teypTextList[$0.key];
                                      return myTextButton(
                                        width: 80,
                                        height: 40,
                                        radius: 4,
                                        select: select,
                                        colors: select
                                            ? [const Color(0xFF9ED1E6), Colors.white.withOpacity(1)]
                                            : [Colors.transparent, Colors.transparent],
                                        onTap: () => globalController.updateUSBorRCA(type: $0.value),
                                        child: Center(
                                            child: $0.value == SourceType.bt
                                                ? Image.asset(text)
                                                : Text(text, style: font30)),
                                      );
                                    }).toList(),
                                  ),
                                ),

                                ///中间箭头
                                Image.asset(assets.arrow, width: 80),
                              ],
                            ),
                          ),

                          ///右边具体合频选项
                          Expanded(
                            child: Container(
                              padding: const EdgeInsets.all(5),
                              decoration: boxDecoration(5),
                              child: Container(
                                // color: Colors.amber,
                                child: Column(
                                  spacing: globalController.sourceType.value != SourceType.rca ? 0 : 10,
                                  children: [
                                    ///
                                    globalController.sourceType.value != SourceType.rca
                                        ? Container()
                                        : Flexible(
                                            flex: 2,
                                            child: Row(
                                              mainAxisAlignment: MainAxisAlignment.start,
                                              children: [
                                                ///2-ch,4-ch,sum
                                                Flexible(
                                                  flex: 2,
                                                  child: Container(
                                                    decoration: boxDecoration(5),
                                                    padding: const EdgeInsets.only(left: 10, right: 10),
                                                    child: Row(
                                                      mainAxisAlignment: MainAxisAlignment.center,
                                                      children: [
                                                        Flexible(
                                                            child: Column(
                                                                mainAxisAlignment: MainAxisAlignment.spaceAround,
                                                                children: [sumList[0], sumList[1]]
                                                                    .map(($0) => buildMyTextButton(type: $0))
                                                                    .toList())),
                                                        Image.asset(assets.arrow, width: 40),
                                                        Flexible(child: buildMyTextButton(type: sumList[2])),
                                                      ],
                                                    ),
                                                  ),
                                                ),

                                                ///2-ch,4-ch,sum后面的箭头
                                                Flexible(
                                                  child: Column(
                                                    crossAxisAlignment: CrossAxisAlignment.start,
                                                    children: [
                                                      Flexible(flex: 5, child: Container()),
                                                      Flexible(
                                                          flex: 6,
                                                          child:
                                                              Image.asset(assets.arrow2, width: 60, fit: BoxFit.fill))
                                                    ],
                                                  ),
                                                ),

                                                ///reset
                                                Flexible(
                                                    child: globalController.sourceType.value == SourceType.rca &&
                                                            globalController.sum.value.value == SumType.sumCUSTOM.value
                                                        ? Container(
                                                            width: 120,
                                                            child: Align(
                                                              alignment: Alignment.center,
                                                              child: myTextButton(
                                                                width: 120,
                                                                height: 40,
                                                                radius: 4,
                                                                color: const Color(0xFF9ED1E6),
                                                                colors: [
                                                                  const Color(0xFF9ED1E6),
                                                                  Colors.white.withOpacity(1)
                                                                ],
                                                                onTap: () =>
                                                                    globalController.updateSum(type: SumType.sumRESET),
                                                                child: Center(child: Text('RESET', style: font30)),
                                                              ),
                                                            ),
                                                          )
                                                        : Container())
                                              ],
                                            ),
                                          ),

                                    ///in/out
                                    Flexible(
                                        flex: 3,
                                        child: Container(
                                          child: Column(
                                            mainAxisAlignment: MainAxisAlignment.center,
                                            crossAxisAlignment: CrossAxisAlignment.end,
                                            spacing: globalController.sourceType.value == SourceType.rca ? 5 : 5,
                                            children: globalController.sourceType.value == SourceType.rca
                                                ? [
                                                    arrowGrid(const InBottomGrid(title: 'IN'), leftGap: 60.0),
                                                    bottomgrid(const InBottomGrid(title: 'OUT'), needGap: false)
                                                  ]
                                                : [
                                                    arrowGrid(const InBottomGrid(title: 'IN'), isTitle: true),
                                                    bottomgrid(const InBottomGrid(title: 'RIGHT'), reversed: false),
                                                    bottomgrid(const InBottomGrid(title: 'OUT')),
                                                    bottomgrid(const InBottomGrid(title: 'LEFT'), reversed: false)
                                                  ],
                                          ),
                                        ))
                                  ],
                                ),
                              ),
                            ),
                          )
                        ],
                      );
                    }),
                  ),
                )
              ],
            ),
          )),

          ///退出按钮
          Positioned(left: 10, bottom: 10, child: backButtom(context)),
        ],
      ),
    );
  }
}

    // child: Obx(() {
            //   return Row(
            //     children: [
            //       Flexible(child: Container()),
            //       Flexible(
            //         flex: 10,
            //         child: Column(
            //           spacing: 10,
            //           children: [
            //             ///顶部CHANNEL SETUP
            //             Center(
            //                 child: myTextButton(
            //                     height: 40,
            //                     radius: 4,
            //                     width: 320,
            //                     color: const Color(0xFF88B855),
            //                     colors: const [Color(0xFF88B855), Color(0xFF88B855)],
            //                     onTap: () => print('=============>点击了channel setup按钮'),
            //                     child: Center(child: Text('CHANNEL SETUP', style: font30)))),

            //             ///上半部份
            //             Flexible(
            //               flex: 4,
            //               child: Container(
            //                 color: Colors.transparent,
            //                 child: Row(
            //                   mainAxisAlignment: MainAxisAlignment.start,
            //                   children: [
            //                     ///左边 bt | usb | rca
            //                     Container(
            //                       width: 100,
            //                       padding: const EdgeInsets.only(top: 10, bottom: 10),
            //                       decoration: boxDecoration(5),
            //                       child: Column(
            //                         spacing: 10,
            //                         mainAxisAlignment: MainAxisAlignment.spaceAround,
            //                         children: sourceList.asMap().entries.map(($0) {
            //                           bool select = globalController.sourceType.value == $0.value;
            //                           String text = teypTextList[$0.key];
            //                           return Expanded(
            //                               child: myTextButton(
            //                             width: 80,
            //                             radius: 4,
            //                             select: select,
            //                             colors: select
            //                                 ? [const Color(0xFF9ED1E6), Colors.white.withOpacity(1)]
            //                                 : [Colors.transparent, Colors.transparent],
            //                             onTap: () => globalController.updateUSBorRCA(type: $0.value),
            //                             child: Center(
            //                                 child: $0.value == SourceType.bt
            //                                     ? Image.asset(text)
            //                                     : Text(text, style: font30)),
            //                           ));
            //                         }).toList(),
            //                       ),
            //                     ),

            //                     ///中间箭头
            //                     globalController.sourceType.value == SourceType.rca
            //                         ? Image.asset(assets.arrow, width: 40)
            //                         : Flexible(
            //                             child: Column(
            //                               crossAxisAlignment: CrossAxisAlignment.start,
            //                               children: [
            //                                 Flexible(flex: 17, child: Container()),
            //                                 Expanded(flex: 20, child: Image.asset(assets.arrow_long, fit: BoxFit.fill))
            //                               ],
            //                             ),
            //                           ),

            //                     ///中间2-ch,4-ch,sum
            //                     globalController.sourceType.value != SourceType.rca
            //                         ? Container()
            //                         : Flexible(
            //                             flex: 1,
            //                             child: Container(
            //                               decoration: boxDecoration(5),
            //                               padding: const EdgeInsets.only(left: 10, right: 10),
            //                               child: Row(
            //                                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            //                                 children: [
            //                                   Flexible(
            //                                       child: Column(
            //                                           mainAxisAlignment: MainAxisAlignment.spaceAround,
            //                                           children: [sumList[0], sumList[1]]
            //                                               .map(($0) => buildMyTextButton(type: $0))
            //                                               .toList())),
            //                                   Image.asset(assets.arrow, width: 40),
            //                                   Flexible(child: buildMyTextButton(type: sumList[2])),
            //                                 ],
            //                               ),
            //                             ),
            //                           ),

            //                     ///右边箭头
            //                     globalController.sourceType.value != SourceType.rca
            //                         ? Flexible(child: Container())
            //                         : Flexible(
            //                             flex: 1,
            //                             child: Row(
            //                               mainAxisAlignment: MainAxisAlignment.start,
            //                               children: [
            //                                 Column(
            //                                   children: [
            //                                     Flexible(flex: 5, child: Container()),
            //                                     Flexible(flex: 6, child: Image.asset(assets.arrow2, width: 60))
            //                                   ],
            //                                 ),
            //                                 Expanded(child: Container())
            //                               ],
            //                             ),
            //                           ),
            //                   ],
            //                 ),
            //               ),
            //             ),

            //             ///底部in / out
            //             Flexible(
            //               flex: 5,
            //               child: Container(
            //                 color: Colors.transparent,
            //                 child: Column(
            //                   spacing: globalController.sourceType.value == SourceType.rca ? 0 : 10,
            //                   children: globalController.sourceType.value == SourceType.rca
            //                       ? [inBottomGrid(), outBottomGrid()]
            //                       : [rightBottomGrid(), outBottomGrid(), leftBottomGrid()],
            //                 ),
            //               ),
            //             ),
            //           ],
            //         ),
            //       ),
            //       Flexible(child: Container()),
            //     ],
            //   );
            // }),